<template>
  <div class="dhgz-box">
    <div class="dhgz-text">
      <span>自动会话结束</span>
    </div>
    <div class="dhgz-switch1">
      <el-switch v-model="value1" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>
    <div class="dhgz-text1">
      <span>超过</span>
    </div>
    <div class="dhgz-textbook">
      <el-input type="textarea1" placeholder="20" v-model="textarea1" id="lzg">
      </el-input>
    </div>
    <div class="dhgz-text2">
      <span>分钟无响应自动发送</span>
    </div>
    <div class="dhgz-fgline">
      <el-divider></el-divider>
    </div>
    <div class="dhgz-text3">
      <span>访客离线自动结束对话</span>
    </div>
    <div class="dhgz-switch2">
      <el-switch v-model="value2" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>
    <div class="dhgz-text4">
      <span>访客离线超过</span>
    </div>
    <div class="dhgz-textbook1">
      <el-input type="textarea1" placeholder="20" v-model="textarea1" id="lzg1">
      </el-input>
    </div>
    <div class="dhgz-text5">
      <span>秒自动结束对话</span>
    </div>
    <div class="dhgz-fgline1">
      <el-divider></el-divider>
    </div>
    <div class="dhgz-text6">
      <span>客服离线自动转接</span>
    </div>
    <div class="dhgz-switch3">
      <el-switch v-model="value3" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>
    <div class="dhgz-text7">
      <span
        >正常对话过程中如顾客发送消息时客服已离线，则对话将被自动转接给在线的客服</span
      >
    </div>
    <div class="dhgz-text8">
      <span>访客发送消息后</span>
    </div>
    <div class="dhgz-textbook2">
      <el-input type="textarea1" placeholder="20" v-model="textarea1" id="lzg2">
      </el-input>
    </div>
    <div class="dhgz-text9">
      <span>秒客服一直没有在线则自动转接</span>
    </div>
    <div class="dhgz-fgline2">
      <el-divider></el-divider>
    </div>
    <div class="dhgz-text10">
      <span>进入对话窗立即开始对话</span>
    </div>
    <div class="dhgz-switch4">
      <el-switch v-model="value4" active-text="开启" inactive-text="关闭">
      </el-switch>
    </div>
    <div class="dhgz-text11">
      <span
        >开启后顾客进入对话窗时客服就会立即接入对话，客服可以主动与顾客沟通。关闭则必须顾客发送首条消息时客服才接入对话。</span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      value1: true,
      textarea1: "",
      value2: true,
      value3: true,
      value4: true,
    };
  },
};
</script>

<style>
.dhgz-box {
  width: 1040px;
  height: 499px;
  background-color: #ffffff;
}
.dhgz-text {
  width: 84px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 20px;
  left: 15px;
}
.dhgz-switch1 {
  position: relative;
  top: 1px;
  left: 140px;
}
.dhgz-text1 {
  width: 28px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: 30px;
  left: 15px;
}
.dhgz-textbook #lzg {
  width: 45px;
  height: 40px;
  background-color: #f2f2f2;
  font-size: 13px;
  color: black;
  border-radius: 0%;

  position: relative;
  top: 5px;
  left: 55px;
}
.dhgz-text2 {
  width: 140px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -29px;
  left: 112px;
}
.dhgz-fgline {
  position: relative;
  top: -20px;
  left: 15px;
}
.dhgz-text3 {
  width: 140px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -25px;
  left: 15px;
}
.dhgz-switch2 {
  position: relative;
  top: -45px;
  left: 190px;
}
.dhgz-text4 {
  width: 84px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -25px;
  left: 15px;
}
.dhgz-textbook1 #lzg1 {
  width: 45px;
  height: 40px;
  background-color: #f2f2f2;
  font-size: 13px;
  color: black;
  border-radius: 0%;

  position: relative;
  top: -50px;
  left: 110px;
}
.dhgz-text5 {
  width: 98px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -84px;
  left: 165px;
}
.dhgz-fgline1 {
  position: relative;
  top: -75px;
  left: 15px;
}
.dhgz-text6 {
  width: 112px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -80px;
  left: 15px;
}
.dhgz-switch3 {
  position: relative;
  top: -99px;
  left: 160px;
}
.dhgz-text7 {
  width: 510px;
  height: 15px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -90px;
  left: 15px;
}
.dhgz-text8 {
  width: 98px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -55px;
  left: 15px;
}
.dhgz-textbook2 #lzg2 {
  width: 45px;
  height: 40px;
  background-color: #f2f2f2;
  font-size: 13px;
  color: black;
  border-radius: 0%;

  position: relative;
  top: -80px;
  left: 125px;
}
.dhgz-text9 {
  width: 196px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -113px;
  left: 179px;
}
.dhgz-fgline2 {
  position: relative;
  top: -105px;
  left: 15px;
}
.dhgz-text10 {
  width: 154px;
  height: 19px;
  color: #333333;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -110px;
  left: 15px;
}
.dhgz-switch4 {
  position: relative;
  top: -129px;
  left: 195px;
}
.dhgz-text11 {
  width: 784px;
  height: 19px;
  color: #cccccc;
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 24px;

  position: relative;
  top: -113px;
  left: 15px;
}
</style>